﻿<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset='utf-8'>
<title></title>
<link th:href="@{/profile/imgs/favicon.ico}" rel="shortcut icon"/>
<script type='text/javascript' src='/libs/jquery-1.12.3.min.js'></script>
<script type='text/javascript' src='/libs/echarts.min.js'></script>
<script type='text/javascript' src='/libs/china.js'></script>
<script type='text/javascript' src='/libs/Bubble.js'></script>
<link rel='stylesheet' href='/css1/style.css'>
<script type='text/javascript' src='/libs/utils.js'></script>
</head>
<body>
	<div class='head clearfix'>

		<h1 class='pulll_left'>
			<a onclick="relocate('/')">[[${name}]]</a>
		</h1>
		<div class='menu menu2 pulll_left'>
			<ul>
				<li><a onclick="setlocate('/realtime/washow','')">衡器监控</a></li>
				<li><a onclick="setlocate('/realtime/wacharts','')">实时曲线</a></li>
				<li><a onclick="setlocate('/realtime/wachartshis','')">历史曲线</a></li>
				<li><a onclick="relocate('/index?t=/realtime/waalarmlist','')">告警列表</a></li>
				<li><a onclick="relocate('/index?t=/realtime/waWorkOrderList')">工单列表</a></li>
			</ul>
		</div>
		<div class='time' id='showTime'>1970/01/01 00:00:00</div>
	</div>
	<div class='mainbox'>
		<ul class='clearfix nav1'>
			<li style='width: 22%'>
				<div class='box'>
					<div class='tit'>衡器信息</div>
					<div class='boxnav'>
						<table class='table1' width='100%' border='0' cellspacing='0'
							cellpadding='0'>
							<tbody>
								<tr>
									<th>名称</th>
									<th>类型</th>
									<th>型号</th>
									<th>状态</th>
								</tr>
								<tr>
									<td><a th:text='${waMap.waname }'
										th:href="@{/realtime/washow(waCode=${waMap.wacode})}"></a></td>
									<td><span th:text='${waMap.wacode }' class='text-w'></span></td>
									<td><span th:text='${waMap.model }' class='text-b'></span></td>
									<td>
										<span th:if="${alarmNum>0}" class="text-d">异常([[${alarmNum}]])</span>
										<span th:if="${alarmNum==0}" class="text-s">正常</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class='box' style="height: 340px;">
					<div>
						<div style="float: left;" class='tit'>最近告警</div>
						<div style="text-align: right;" class='tit'>
							<a onclick="relocate('/index?t=/realtime/waalarmlist','')">更多</a>
						</div>
					</div>
					<table class='table1' width='100%' border='0' cellspacing='0'
						cellpadding='0'>
						<tbody>
							<tr>
								<th>要素</th>
								<th>序号</th>
								<th>时间</th>
								<th>内容</th>
							</tr>
							<tr th:each='o,stat:${alarmList}'>
								<td>[[${o.code}]]</td>
								<td><span class='text-w'>[[${o.orderNum}]]</span></td>
								<td><span class='text-b'>[[${o.time}]]</span></td>
								<td><div class='text-d'>[[${o.message}]]</div></td>
							</tr>
						</tbody>
					</table>
				</div>
			</li>

			<li style='width: 39%'>
				<div class='box'>
					<div style="float: left;" class='tit'>月告警量</div>
					<div style="text-align: right;" class='tit'>
						<a onclick="relocate('/index?t=/realtime/waalarmlist','')">更多</a>
					</div>
					<div class='boxnav' style='height: 432px;'>
						<div class='' style='height: 400px' id='echart4'></div>
					</div>
				</div>
			</li>

			<li style='width: 39%'>

				<div class='box'>
					<div style="float: left;" class='tit'>日告警量</div>
					<div style="text-align: right;" class='tit'>
						<a onclick="relocate('/index?t=/realtime/waalarmlist','')">更多</a>
					</div>
					<div class='boxnav' style='height: 432px;'>
						<div class='boxnav' id='echart3' style='height: 400px;'></div>
					</div>
				</div>
			</li>

		</ul>
		<div class='box' style="height: 300px">
			<ul class='clearfix nav2 '>
				<li style='width: 33%'>
					<div>
						<div style="float: left;" class='tit'>工单列表</div>
						<div style="text-align: right;" class='tit'>
							<a onclick="relocate('/index?t=/realtime/waWorkOrderList','')">更多</a>
						</div>
					</div>
					<table class='table1' width='100%' border='0' cellspacing='0'
						cellpadding='0'>
						<tbody>
							<tr>
								<th>工单类型</th>
								<th>巡检类型</th>
								<th>告警要素</th>
								<th>工单状态</th>
								<th>责任人</th>
								<th>创建时间</th>
								<th>完成时间</th>
							</tr>
							<tr th:each='o,stat:${workOrderList}'>
								<td><span th:class="${o.type}=='1'?'text-w':'text-b'">[[${o.workorderType}]]</span></td>
								<td><span class='text-b' th:if="${o.type=='2'}">[[${o.osiTypeName}]]</span></td>
								<td><span th:if="${o.type=='1'}">[[${o.ename}]]</span></td>
								<td><span th:class="${o.state}=='1'?'text-s':'text-d'">[[${o.stateName}]]</span></td>
								<td><span class='text-w'>[[${o.handlerName}]]</span></td>
								<td>
									<div class='text-b'>[[${o.create_time}]]</div>
								</td>
								<td>
									<div th:if="${o.state==1}" class='text-s'>[[${o.update_time}]]</div>
								</td>
							</tr>
						</tbody>
					</table>
				</li>
				<li style='width: 33%'>
					<div>
						<div style="float: left;" class='tit'>巡检记录</div>
						<div style="text-align: right;" class='tit'>
							<a onclick="relocate('/index?t=/womp/osiRecord','')">更多</a>
						</div>
					</div>
					<table class='table1' width='100%' border='0' cellspacing='0'
						cellpadding='0'>
						<tbody>
							<tr>
								<th>巡检类型</th>
								<th>巡检人</th>
								<th>备注</th>
								<th>时间</th>
							</tr>
							<tr th:each='o,stat:${osiRecordList}'>
								<td>[[${o.dict_label}]]</td>
								<td><span class='text-b'>[[${o.user_name}]]</span></td>
								<td><span class='text-w'>[[${o.remark}]]</span></td>
								<td>
									<div class='text-b'>[[${o.create_time}]]</div>
								</td>
							</tr>
						</tbody>
					</table>
				</li>
				<li style='width: 33%'>
					<div>
						<div style="float: left;" class='tit'>备件库存</div>
						<div style="text-align: right;" class='tit'>
							<a onclick="relocate('/index?t=/womp/spareParts','')">更多</a>
						</div>
					</div>
					<table class='table1' width='100%' border='0' cellspacing='0'
						cellpadding='0'>
						<tbody>
							<tr>
								<th>名称</th>
								<th>型号</th>
								<th>规格</th>
								<th>库存</th>
							</tr>
							<tr th:each='o,stat:${sparePartsList}'>
								<td>[[${o.name}]]</td>
								<td><span class='text-b'>[[${o.model}]]</span></td>
								<td><span class='text-w'>[[${o.spec}]]</span></td>
								<td>
									<span th:class="${o.num}>0?'text-s':'text-d'">[[${o.num}]]</span>
								</td>
							</tr>
						</tbody>
					</table>
				</li>
			</ul>
		</div>
	</div>
	<script th:inline='javascript'>
		document.title = [[${name}]] + document.title;
		var ctxPath = [[@{/}]];
      
		var monthAlarmList = [[${monthAlarmList}]]
		var monthNames=[]
		var monthValues=[]
		for(var i=0;i<monthAlarmList.length;i++){
			monthNames[i]=monthAlarmList[i].month;
			monthValues[i]=monthAlarmList[i].num;
		}
    	  
		var dayAlarmList = [[${dayAlarmList}]]
		var dayNames=[]
		var dayValues=[]
		for(var i=0;i<dayAlarmList.length;i++){
			dayNames[i]=dayAlarmList[i].day;
			dayValues[i]=dayAlarmList[i].num;
		}
    	// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('echart4'))
		var myChart2 = echarts.init(document.getElementById('echart3'))
		option = {
			tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},
			grid: {left: '0%',top: '40px',right: '0%',bottom: '0%',containLabel: true},
			xAxis: [{
    	        type: 'category',
    	        data: monthNames,
    	        axisLine: {show: true,lineStyle: {color: 'rgba(255,255,255,.1)',width: 1,type: 'solid'}},
    	        axisTick: {show: false},
    	        axisLabel: {interval: 0,rotate:50,show: true,splitNumber: 15,textStyle: {color: 'rgba(255,255,255,.6)',fontSize: '14'}}
			}],
			yAxis: [{
    	        type: 'value',axisLabel: {show: true,textStyle: {color: 'rgba(255,255,255,.6)',fontSize: '14'}},
    	        axisTick: {show: false},
    	        axisLine: {show: true,lineStyle: {color: 'rgba(255,255,255,.1	)',width: 1,type: 'solid'}},
				splitLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}}
			}],
			series: [{type: 'bar',data: monthValues,barWidth: '10', //柱子宽度
				// barGap: 1, //柱子之间间距
				itemStyle: {normal: {color: '#2f89cf',opacity: 1,barBorderRadius: 5}}
			}]
		};
		option2 = {
			//  backgroundColor: '#00265f',
			tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},
			grid: {left: '0%',top: '40px',right: '0%',bottom: '0',containLabel: true},
			xAxis: [{
    	        type: 'category',
    	        data: dayNames,
    	        axisLine: {show: true,lineStyle: {color: 'rgba(255,255,255,.1)',width: 1,type: 'solid'}},
    	        axisTick: {show: false},
    	        axisLabel: {interval: 0,rotate:50,show: true,splitNumber: 5,textStyle: {color: 'rgba(255,255,255,.6)',fontSize: '12'}}
			}],
			yAxis: [{
				type: 'value',//max:5,
				axisLabel: {
					//formatter: '{value} %'
					show: true,textStyle: {color: 'rgba(255,255,255,.6)',fontSize: '12'}
				},
				axisTick: {show: false},
				axisLine: {show: true,lineStyle: {color: 'rgba(255,255,255,.1)',width: 1,type: 'solid'}},
				splitLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}}
			}],
			series: [{
				type: 'bar',
				smooth: true,
				barWidth: '10', //柱子宽度
				data: dayValues,
				itemStyle: {normal: {color: '#2f89cf',opacity: 1,barBorderRadius: 5}}
			}]
		}

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option)
		myChart2.setOption(option2)
		window.addEventListener('resize', function() {
			myChart.resize()
		})
		setInterval(function(){
			location.reload(); // 重载当前页面
		}, 10000);
    </script>
</body>
</html>
